<template>
  <!--名单剔除-->
  <section class="page role-manage">
    <data-form :model="roleModel" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="客户号" prop="customerNo">
          <el-input v-model.trim="roleModel.customerNo"></el-input>
        </el-form-item>
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model.trim="roleModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="剔除渠道" prop="channelTypeList">
          <el-select v-model="roleModel.channelTypeList" collapse-tags :allow-create="true" multiple placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('ChannelType')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="策略状态" prop="strategyState">
          <el-select v-model="roleModel.strategyState" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改人" prop="operatorRealName">
          <el-input v-model.trim="roleModel.operatorRealName"></el-input>
        </el-form-item>
        <el-form-item label="复核人" prop="approvalRealName">
          <el-input v-model.trim="roleModel.approvalRealName"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="roleDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button v-auth="23320" @click="(roleObj = {}),(dialog.modify = true),(operationType.DEFAULT = 'ACCOUNT_ELIMINATION')">账户剔除</el-button>
        <el-button v-auth="23321" @click="(roleObj = {}),(dialog.modify = true),(operationType.DEFAULT = 'CUSTOMER_ELIMINATION')">客户剔除</el-button>
        <el-button v-auth="23322" @click="(submitType = 'listRemoved'), (dialog.caseExcelImport = true)">上传名单剔除</el-button>
        <el-button v-auth="23323" @click="onClickexport">下载剔除模板</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(2)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                (roleObj = { ...scope.row }),
                  (dialog.list = true),
                  (operationType.DEFAULT = 'OPERATION_EDIT')
              " :disabled="scope.row.applyStatus === 'PENDING' ? true : false" v-auth="23324">修改</el-button>
            <el-button type="text" @click="
                (roleObj = { ...scope.row }),
                  (dialog.list = true),
                  (operationType.DEFAULT = 'OPERATION_SEE')
              ">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="customerNo" label="客户号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- <div v-if="scope.row.strategyType === 'CUSTOMER'">
              <div class="border" v-for="(item, i) in scope.row.channel" :key="i">
                {{ item.caseNumber }}
              </div>
            </div>
            <div v-else>{{ scope.row.caseNumber }}</div> -->
            <div>{{ scope.row.caseNumber }}</div>
          </template>
        </el-table-column>
        <el-table-column label="剔除渠道" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="border" v-for="(item, i) in scope.row.channel" :key="i">
              {{ $filter.dictConvert(item.channelType, "ChannelType") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="channelJson.expiryDate" label="有效期" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="border" v-for="(item, i) in scope.row.channel" :key="i">
              {{ $filter.dateFormat(item.effectiveTime) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="strategyState" label="策略状态" :min-width="$helper.getColumnWidth(4)" :formatter="
            row => $filter.dictConvert(row.strategyState, 'CommonState')
          " show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operatorRealName" label="修改人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="timeCreated" label="修改时间" :formatter="row => $filter.dateTimeFormat(row.timeCreated)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="approvalRealName" label="复核人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="approvalTime" label="复核时间" :formatter="row => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="approvalOpinion" label="审批意见" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="注记" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="审批记录" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                (roleObj = { ...scope.row }),
                  (dialog.module = true),
                  (operationType.DEFAULT = 'APPROVAL_LOG')
              ">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="剔除日志" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text" @click="
                (roleObj = { type: 'RuleRm', ...scope.row }),
                  (dialog.module = true),
                  (operationType.DEFAULT = 'ELIMINATION_LOG')
              ">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--账户/客户剔除弹出框-->
    <el-dialog :title="
        operationType.DEFAULT === 'ACCOUNT_ELIMINATION'
          ? '账户剔除'
          : '客户剔除'
      " :center="true" :visible.sync="dialog.modify" width="500px" :close-on-press-escape="false" :close-on-click-modal="false" @open="$nextTick(() => $refs['add-list'].reset())">
      <add-list :roleData="roleObj" @close="
          dialog.modify = false;
          refreshData();
        " @refreshList="refreshData" ref="add-list"></add-list>
    </el-dialog>
    <!-- 编辑/查看 -->
    <el-dialog :title="operationType.DEFAULT === 'OPERATION_EDIT' ? '编辑' : '查看详情'" :center="true" :visible.sync="dialog.list" width="900px" :close-on-press-escape="false" @open="$nextTick(() => $refs['add-list-item'].reset())" :close-on-click-modal="false">
      <add-list-item :roleData="roleObj" @close="dialog.list = false" @refreshList="refreshData" ref="add-list-item"></add-list-item>
    </el-dialog>
    <!-- 日志及审批记录弹框 -->
    <el-dialog :title="
        operationType.DEFAULT === 'APPROVAL_LOG' ? '审批日志' : '名单剔除日志'
      " :center="true" @close="dialog.module = false" :visible.sync="dialog.module" width="700px" :close-on-press-escape="false" @open="$nextTick(() => $refs['list-log'].refreshData())" :close-on-click-modal="false">
      <list-log :modifyData="roleObj" @refreshList="refreshData" ref="list-log" eliminateType="NAME_LIST_ELIMINATE"></list-log>
    </el-dialog>
    <!-- 上传名单剔除 -->
    <el-dialog title="上传名单剔除" :center="true" @close="dialog.caseExcelImport = false" :visible.sync="dialog.caseExcelImport" width="500px" :close-on-click-modal="false">
      <case-excel-import-new @close="dialog.caseExcelImport = false" :submitType="submitType" @success="refreshData" ref="case-excel-import-new"></case-excel-import-new>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies, Auth } from "~/core/decorator";
import { ListRemovedService } from "~/services/domain-service/list-removed.service";
import CaseExcelImportNew from "~/components/common/case-excel-import-new.vue";
import { RoleService } from "~/services/management-service/role.service";
import { PageService } from "~/utils/page.service";
import AddList from "~/components/strategic-manage/add-list.vue";
import AddListItem from "~/components/strategic-manage/add-list-item.vue";
import ListLog from "~/components/strategic-manage/list-log.vue";
import { OPERATION_TYPE } from "~/config/enum.config";
import { namespace } from "vuex-class";

const systemModule = namespace("system-manage");

@Auth(2332)
@Layout("workspace")
@Component({
  components: {
    CaseExcelImportNew,
    AddList,
    ListLog,
    AddListItem
  }
})
export default class ListRemoved extends Vue {
  @Dependencies(ListRemovedService)
  private listRemovedService: ListRemovedService;
  @Dependencies(PageService)
  private pageService: PageService;
  @systemModule.Action private updateResource: () => void;
  private roleModel: any = {
    customerNo: "",
    caseNumber: "",
    channelTypeList: [],
    strategyState: "",
    operatorRealName: "",
    approvalRealName: ""
  };
  // 页面按钮类型
  private operationType: any = OPERATION_TYPE;
  private submitType: string = "";
  private roleDataSet: any[] = [];
  private channelTime: any = [];
  private roleObj: any = {};
  private dialog: any = {
    modify: false,
    module: false,
    list: false,
    caseExcelImport: false
  };

  /**
   * 获取名单剔除列表
   */
  public refreshData() {
    if (
      this.roleModel.caseNumber &&
      this.$validator.regex.isChineseComma.test(this.roleModel.caseNumber)
    )
      return this.$message.error("请用英文逗号！");
    this.listDate();
  }
  /**
   * 下载
   */
  private onClickexport() {
    this.listRemovedService.downTemplate().subscribe(data => {
      if (data) this.$common.downloadFile(data, "名单剔除模版.xlsx");
    });
  }
  /**
   * 名单剔除列表数据
   */
  private listDate() {
    this.listRemovedService
      .getNameList(this.roleModel, this.pageService)
      .subscribe(data => {
        data.map(f => {
          if (f.channelJson !== "") {
            f.channel = JSON.parse(f.channelJson);
          }
        });
        this.roleDataSet = data;
      });
  }
  private mounted() {
    this.refreshData();
    this.updateResource();
  }
}
</script>

<style lang="less" scoped>
.border {
  border-bottom: 1px solid #ebeef5;
}
div:last-child {
  border-bottom: none;
}
</style>
